<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>注册</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />

  <script type="text/javascript" src="../shop-style/js/jquery.js"></script>
  <script type="text/javascript" src="../shop-style/js/index.js"></script>
  <script src="../shop-style/script/global.js" type="text/javascript"></script>
  <script src="../shop-style/script/head.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="../shop-style/css/main.css"/>
  <link rel="stylesheet" type="text/css" href="../shop-style/css/basic.css">
  <link rel="stylesheet" type="text/css" href="../shop-style/css/style.css" />
  <link rel="stylesheet" href="../shop-style/style/base.css" />
  <link rel="stylesheet" href="../shop-style/style/head.css" />

  <link rel="stylesheet" type="text/css" href="../h-ui/css/H-ui.min.css" />
  <link rel="stylesheet" type="text/css" href="../h-ui.admin/css/H-ui.admin.css" />
  <link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css" />
  <link rel="stylesheet" type="text/css" href="../h-ui.admin/skin/default/skin.css" id="skin" />
  <link rel="stylesheet" type="text/css" href="../h-ui.admin/css/style.css" />

</head>


<body>

<!-- 插入公共模板 _top -->
<div th:replace="../templates/user/common/_top :: common_top"></div>

<!-- 插入公共模板 _headNav -->
<div th:replace="../templates/user/common/_headNav :: common_headNav"></div>


<div class="con_ny">
  <form th:action="@{doUserAdd}" method="post" class="form form-horizontal" id="form-user-add" style="width: 760px;">
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用户名：</label>
      <div class="formControls col-xs-8 col-sm-9">
        <input type="text" class="input-text" value="" placeholder="" id="userName" name="userName">
      </div>
    </div>
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>密码：</label>
      <div class="formControls col-xs-8 col-sm-9">
        <input type="password" class="input-text" value="" placeholder="" id="password" name="password">
      </div>
    </div>
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>确认密码：</label>
      <div class="formControls col-xs-8 col-sm-9">
        <input type="password" class="input-text" value="" placeholder="" id="password1" name="password1">
      </div>
    </div>
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
      <div class="formControls col-xs-8 col-sm-9 skin-minimal">
        <div class="radio-box">
          <input type="radio" id="sex-1" name="sex" value="男" checked>
          <label for="sex-1">男</label>
        </div>
        <div class="radio-box">
          <input type="radio" id="sex-2" name="sex" value="女">
          <label for="sex-2">女</label>
        </div>
        <div class="radio-box">
          <input type="radio" id="sex-3" name="sex" value="保密">
          <label for="sex-3">保密</label>
        </div>
      </div>
    </div>
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机：</label>
      <div class="formControls col-xs-8 col-sm-9">
        <input type="text" class="input-text" value="" placeholder="" id="phone" name="phone">
      </div>
    </div>
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>地址：</label>
      <div class="formControls col-xs-8 col-sm-9">
				<span class="select-box">
					<select class="select" size="1" id="province" name="province" style="width:180px"></select>
					<select class="select" size="1" id="city" name="city" style="width:180px"></select>
					<select class="select" size="1" id="country" name="country" style="width:180px"></select>
				</span>
        <div id="show"></div>
      </div>
    </div>
    <div class="row cl">
      <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
        <button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i>&nbsp;&nbsp;注&nbsp;&nbsp;册&nbsp;&nbsp;</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button id="reset" class="btn btn-default radius" type="reset">&nbsp;&nbsp;重&nbsp;&nbsp;置&nbsp;&nbsp;</button>
      </div>
    </div>
  </form>
</div>


<!-- 插入公共模板 _footer -->
<div th:replace="../templates/user/common/_footer :: common_footer"></div>


<!-- 引入城市三级联动js -->
<script type="text/javascript" src="../my/area.js"></script>

<script type="text/javascript" src="../../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../../lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="../../h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="../../h-ui.admin/js/H-ui.admin.page.js"></script>
<script type="text/javascript" src="../lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="../lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="../lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
  $(function(){
    $('.skin-minimal input').click({
      checkboxClass: 'icheckbox-blue',
      radioClass: 'iradio-blue',
      increaseArea: '20%'
    });

    /**
     * 表单校验
     */
    $("#form-user-add").validate({
      rules:{
        userName:{
          required:true,
          minlength:2,
          maxlength:16
        },
        password:{
          required:true,
          minlength:6,
          maxlength:16
        },
        password1:{
          required:true,
          equalTo: "#password"
        },
        sex:{
          required:true,
        },
        phone:{
          required:true,
          isMobile:true,
        },
        province:{
          required:true,
        },
        city:{
          required:true,
        },
        country:{
          required:true,
        },

      },
      onkeyup:false,
      focusCleanup:true,
      success:"valid",
      submitHandler:function(form){
        $(form).ajaxSubmit({
          dateType: "json",
          success: function (result) {
            if(result.flag == "true"){
              layer.msg("添加成功,请登录!",{icon: 6,time:1000});
            }
            if(result.flag == "exist"){
              layer.msg("用户名已存在!",{icon: 5,time:1000});
            }
            if(result.flag == "false"){
              layer.msg("注册失败!",{icon: 2,time:1000});
            }
          },
          error: function (err) {
            layer.msg('请求异常!',{icon: 2,time:1000})
          }
        });
      }
    });


    /**
     * 城市三级联动
     * */
    _init_area();	//初始化

  });
</script>

</body>
</html>
